import React from "react";
import { Route, Link } from "react-router-dom";
import { Layout, Menu, Button } from "antd";

import { CLayout } from "../compoment/base/index";

import Animal from "../compoment/animal";
const { Header, Footer, Sider, Content } = Layout;

const theme = "dark";

interface IProp {
	match: {
		url: string;
	};
}

interface IState {}

const Home = ({ match }: IProp) => {
	console.log(match.url);
	return (
		<Layout>
			<Sider width={200}>
				<Menu mode="vertical" theme={theme}>
					<Menu.Item key="1">
						<Link to={`${match.url}/bb`}>bb</Link>
					</Menu.Item>
					<Menu.Item key="2">
						<Link to={`${match.url}/cc`}>cc</Link>
					</Menu.Item>
					<Menu.Item key="3">
						<Link to={`${match.url}/dd`}>dd</Link>
					</Menu.Item>
				</Menu>
			</Sider>
			<Content>
				<Button>button</Button>
				Content
				<Route path={`${match.url}/bb`} component={Animal} />
				<Route
					path={`${match.url}/dd`}
					render={() => {
						return <CLayout config={[{ groupSize: 1, gridConfig: [{ lable: "aa", gridSize: 1 }] }, { groupSize: 2, gridConfig: [{ lable: "aa", gridSize: 1 }] }]} />;
					}}
				/>
			</Content>
		</Layout>
	);
};

interface P {
	name: string;
}

export default Home;
